<template>
  <div>
    <!-- 头部 -->
    <div class="box">
      <!-- 头像 -->
      <van-image round fit="cover" :src="info.photo" />
      <!-- 个人资料 -->
      <div class="message">
        <p>{{ info.name }}</p>
        <span>{{ info.birthday }}</span>
      </div>
    </div>
    <!-- 摆设区域 -->
    <van-row>
      <van-col span="8">
        <van-icon class="one" name="newspaper-o" />
        <span>我的作品</span>
      </van-col>
      <van-col span="8">
        <van-icon class="two" name="star-o" />
        <span>我的收藏</span>
      </van-col>
      <van-col span="8">
        <van-icon class="three" name="tosend" />
        <span>阅读历史</span>
      </van-col>
    </van-row>
    <!-- 底部cell区域 -->
    <van-cell-group>
      <van-cell to="/edit" icon="edit" title="编辑资料" is-link />
      <van-cell to="/chat" icon="chat-o" title="小智同学" is-link />
      <van-cell icon="setting-o" title="系统设置" is-link />
      <van-cell @click="logout" icon="info-o" title="退出登录" is-link />
    </van-cell-group>
  </div>
</template>

<script>
import { userApi } from '@/Api'
import store from '@/store'
export default {
  computed: {
    info () {
      return this.$store.state.userinfo
    }
  },
  async created () {
    // 进入我的页面就发请求获取数据
    if (!this.info.name) {
      let res = await userApi()
      // console.log(res)
      // 把拿到的数据赋值给info

      this.$store.commit('changeuserinfo', res.data.data)
    }
  },
  methods: {
    logout () {
      this.$store.commit('remtoken')
      this.$toast.fail('账号已退出')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 140px;
  background-color: #3296fa;
  color: #fff;
  display: flex;
  align-items: center;
  .van-image {
    width: 85px;
    height: 85px;
    margin: 0 12px 0 30px;
  }
  .message {
    p {
      font-weight: 700;
      margin-bottom: 10px;
    }
    span {
      background-color: #fff;
      color: #3296fa;
    }
  }
}
.van-col {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 10px 0;
  .van-icon {
    font-size: 40px;
    margin-bottom: 5px;
    &.one {
      color: #3296fa;
    }
    &.two {
      color: red;
    }
    &.three {
      color: orange;
    }
  }
}
</style>
